<template>
	<view class="charts-box">
		<qiun-data-charts  type="map" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				chartData: {

				},
				opts: {
					dataLabel: false,
					enableScroll: true,
					extra: {
						map: {
							border: true,
							borderWidth: 1,
							borderColor: "#666666",
							fillOpacity: 0.6,
							activeBorderColor: "#F04864",
							activeFillColor: "#FACC14",
							activeFillOpacity: 1
						}
					}
				}
			}
		},
		onReady() {
			// 请求地图geojson数据
			this.getChinaMapData();
		},
		methods: {
			// 请求地图数据
			async getChinaMapData() {
				// 获取地图json数据
				const url = 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full'
				const res = await request(url);
				if (res.statusCode === 200) {

					this.chartData = {
						series: res.data.features
					}
				}
			}
		}
	}
</script>

<style>
.charts-box {
	margin-top: 60rpx;
	width: 100%;
	height: 300px;
}
</style>